<app-common-header [title]="'NOTIFICATION'">

</app-common-header>

<ion-content style="position: relative;">
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-segment value="txn" (ionChange)="selectedOptions($event)">
          <ion-segment-button value="txn">
            <ion-label>
              <svg class="icon_title" aria-hidden="true">
                <use xlink:href="#icontxns"></use>
              </svg>
              Txns
            </ion-label>
          </ion-segment-button>
          <ion-segment-button value="system">
            <ion-label>
              <svg class="icon_title" aria-hidden="true">
                <use xlink:href="#iconsystem"></use>
              </svg>
              System
            </ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>
    <ion-row class="margin_row item_row">
      <ion-col size="5">
        <ion-select interface="popover" class="i_select" name="dateType" placeholder="Month" icon="add-sharp">
          <ion-select-option *ngFor="let item of dateTypes" value="{{item.num}}">{{item.type}}
          </ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col size="5">
        <ion-select interface="popover" class="i_select" name="category" placeholder="Category">
          <ion-select-option *ngFor="let item of categorys" value="{{item.num}}">{{item.type}}
          </ion-select-option>
        </ion-select>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- txn notification-->
  <div class="content_div" [ngStyle]="{'display': isTxn ? 'flex' : 'none' }">
    <ion-grid>
        <div *ngFor="let detail of txnList">
          <ion-row>
            <ion-col size="12" class="ion-text-center">
              <ion-text color="">
               <!--  {{detail.transactionTime | date:'yyyy-MM-dd HH:mm'}} -->
               {{detail.transactionTime}}
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row class="padding_row" (click)="toDetail(detail)">
            <ion-col size="12" class="item_row">
              <ion-list>
                <ion-list-header lines="full">
                  <ion-text color="" class="before_icon title_item">
                    {{detail.merchantName}}
                  </ion-text>
                </ion-list-header>

                <ion-item lines="none">
                  <ion-label>
                    <h2 class="amt_item_title">$ {{detail.amount}}</h2>
                    <p>Transaction Completed</p>
                  </ion-label>
                </ion-item>
              </ion-list>
            </ion-col>
          </ion-row>
        </div>
    </ion-grid>
  </div>
  <!-- system notification-->
  <div class="content_div" [ngStyle]="{'display': !isTxn ? 'flex' : 'none' }">
    <ion-grid>
      <div *ngFor="let item of sysList">
      <ion-row>
        <ion-col size="12" class="ion-text-center">
          <ion-text color="">
             <!--  {{item.notificationDate | date:'yyyy-MM-dd HH:mm'}} -->
             {{item.notificationDate}}
          </ion-text>
        </ion-col>
      </ion-row>
      <ion-row class="padding_row" (click)="toDetail(item)">
        <ion-col size="12" class="item_row">
          <ion-list>
            <ion-list-header lines="full">
              <svg class="icon_item" aria-hidden="true">
                  <use xlink:href="#iconsystem"></use>
              </svg>
              <ion-text color="" class="before_icon amt_item">
              123
              </ion-text>
            </ion-list-header>

            <ion-item lines="none">
              <ion-label class=" ion-wrap">
                <h2 class="amt_item_title"> {{item.notificationTitle}}</h2>
                <p >  {{item.notificationContent}}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
    </div>
    </ion-grid>
  </div>
</ion-content>
<ion-tab-bar>
    <ion-grid class="box_bottom">
        <ion-row>
          <ion-col size="12" class="ion-text-center">
            <ion-text style="font-size: 10px;">
                Displays record of message notifications within 3 months
            </ion-text>
          </ion-col>
        </ion-row>
      </ion-grid> 
</ion-tab-bar>
